<template>
  <div class="nav">
    <router-link class="nav-item" tag="div" to="/recommend">
      <span class="nav-link">推荐</span>
    </router-link>
    <router-link class="nav-item" tag="div" to="/singer">
      <span class="nav-link">歌手</span>
    </router-link>
    <router-link class="nav-item" tag="div" to="/rank">
      <span class="nav-link">排行</span>
    </router-link>
    <router-link class="nav-item" tag="div" to="/search">
      <span class="nav-link">搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeNav'
}

</script>
<style lang='stylus' scoped>
@import '~styles/variable'
.nav
  display flex
  height 0.88rem
  line-height .88rem
  .nav-item
    flex 1
    text-align center
    color $color-text-l
    .nav-link
      padding-bottom .1rem
    &.router-link-active
      .nav-link
        color $color-theme
        border-bottom .04rem solid $color-theme
</style>
